<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>登录|注册</title>
		<link rel="stylesheet" type="text/css" href="css/download.css" />
	</head>
	<style>
		.dowm {
			width: 500px;
			height: 40px;
			border: 1px solid;
		}
	</style>

	<body>
		<div id="html_content">
			<div class="LBS_content">
				<div class="LBS_center">
					<div class="LBS_FI">LBS</div>
					<div class="LBS_title">天津LBS公共服务云平台</div>
					<div class="download_title">
						<ul id="title_1">
							<li class="lis1" style="border-bottom: 3px solid #2AC293;">
								<a class="d1">注册</a>
								<div class="reg_content active">
									<div class="down1">
										<div class="down1_one">
											<input placeholder="姓名:" style="height: 40px; width: 296px; font-size: 13px; border: 0; outline: none;  text-indent: 1em" />
										</div>
										<div class="down1_one">
											<input placeholder="密码:" style="height: 40px; width: 296px; font-size: 13px; border: 0; outline: none;  text-indent: 1em" />
										</div>
										<div class="down1_one">
											<input placeholder="确认密码:" style="height: 40px; width: 296px; font-size: 13px; border: 0; outline: none;  text-indent: 1em" />
										</div>
										<div class="down1_one">
											<input placeholder="邮箱:" style="height: 40px; width: 296px; font-size: 13px; border: 0; outline: none;  text-indent: 1em" />
										</div>
										<div class="down11_one">
											<div class="canves">
												<input placeholder="验证码:" style="height: 40px; width: 170px; font-size: 13px; border: 0; outline: none; text-indent: 1em; border-color: #D5D5D5;" />
											</div>
											<div class="canves1"><canvas id="canvas" width="120" height="40"></canvas>
												<a href="#" id="changeImg">看不清，换一张</a>
											</div>

										</div>
									</div>
									<div class="down2" style="margin-top: 120px;">注册平台</div>
									<div class="down3">点击注册按钮，既代表你同意
										<a>《LBS平台协议》</a>
									</div>
								</div>

							</li>
							<li class="lis2">
								<a class="d1">登录</a>
								<div class="reg_content lis2_li">
									<div class="down1_one">
										<input placeholder="姓名" style="height: 40px; width: 296px; font-size: 13px; border: 0; outline: none; text-indent: 1em;" />
									</div>
									<div class="down1_one">
										<input placeholder="密码" style="height: 40px; width: 296px; font-size: 13px; border: 0; outline: none;  text-indent: 1em" />
									</div>
									<div class="down2" style="margin-top: 20px;">登录</div>
									<div class="down4">
										<a>手机验证码登录</a><span>无法登录？</span></div>
									<div class="down6">
										<a>社交账号登录</a>
									</div>
									<div class="down5">
										<a>使用机构账号登录·联系我们</a>
									</div>
								</div>
							</li>

						</ul>
					</div>

				</div>
			</div>

		</div>
		<script src="js/jquery-1.11.1.js">
		</script>
		<script>
			var login = window.location.href;
			var canshu = login.split("=")[1];
			if(canshu) {
				$("#title_1").find(".lis2").css({
					"borderBottom": "3px solid #2AC293"
				})
				$("#title_1").find(".lis1").css({
					"borderBottom": "0px solid"
				})
				$(".reg_content").removeClass("active");
				$(".lis2_li").addClass("active")
			}
			$(function() {
				checkItem();
			})
			$(function() {
				checkItem();
			})

			function checkItem() {
				for(var i = 0; i < $("#title_1 li").length; i++) {
					$("#title_1 li").eq(i).attr("data-index", i);
				}
				$("#title_1").children().click(function() {
					$("#title_1").children().removeAttr("style");
					$(this).css({
						"border-bottom": "3px solid",
						"color": "#2AC293"
					})
					var index = $(this).attr("data-index");
					$(".reg_content").removeClass("active");
					$(".reg_content").eq(index).addClass("active");
				})
			}

			$(".down2").click(function() {
				var inputs = $("input");
				//				for(i = 0; i < inputs.length; i++) {
				if(inputs.val() == "") {
					alert("不能为空")
				}
				//				}

			})

			function randomNum(min, max) {
				return Math.floor(Math.random() * (max - min) + min);
			}

			function randomColor(min, max) {
				var r = randomNum(min, max);
				var g = randomNum(min, max);
				var b = randomNum(min, max);
				return "rgb(" + r + "," + g + "," + b + ")";
			}
			drawPic();
			document.getElementById("changeImg").onclick = function(e) {
				e.preventDefault();
				drawPic();
			}

			function drawPic() {
				var canvas = document.getElementById("canvas");
				var width = canvas.width;
				var height = canvas.height;
				var ctx = canvas.getContext('2d');
				ctx.textBaseline = 'bottom';
				/**绘制背景色**/
				ctx.fillStyle = randomColor(180, 240); //颜色若太深可能导致看不清
				ctx.fillRect(0, 0, width, height);
				/**绘制文字**/
				var str = 'ABCEFGHJKLMNPQRSTWXY123456789';
				for(var i = 0; i < 4; i++) {
					var txt = str[randomNum(0, str.length)];
					ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色
					ctx.font = randomNum(15, 40) + 'px SimHei'; //随机生成字体大小
					var x = 10 + i * 25;
					var y = randomNum(25, 45);
					var deg = randomNum(-45, 45);
					//修改坐标原点和旋转角度
					ctx.translate(x, y);
					ctx.rotate(deg * Math.PI / 180);
					ctx.fillText(txt, 0, 0);
					//恢复坐标原点和旋转角度
					ctx.rotate(-deg * Math.PI / 180);
					ctx.translate(-x, -y);
				}
				/**绘制干扰线**/
				for(var i = 0; i < 8; i++) {
					ctx.strokeStyle = randomColor(40, 180);
					ctx.beginPath();
					ctx.moveTo(randomNum(0, width), randomNum(0, height));
					ctx.lineTo(randomNum(0, width), randomNum(0, height));
					ctx.stroke();
				}
				/**绘制干扰点**/
				for(var i = 0; i < 100; i++) {
					ctx.fillStyle = randomColor(0, 255);
					ctx.beginPath();
					ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
					ctx.fill();
				}
			}
		</script>

	</body>

</html>